<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0,user-scalable=no" />
		<meta name="format-detection"  content="telephone=no,email=no,adress=no">
		<title>金刚迷你仓</title>
		<link rel="shortcut icon" type="image/x-icon" href="">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<style type="text/css">
			.search_bar {
				position: absolute;
				top: .2rem;
				left: .5rem;
				right: .5rem;
				height: .88rem;
				z-index: 999;
				background: url("img/search.png") no-repeat #FFFFFF .2rem .2rem;
				-webkit-background-size: .45rem .45rem;
				background-size: .45rem .45rem;
				box-shadow: 0 0 10px 0 rgba(198, 174, 56, 0.21);
				border-radius: .06rem;
				padding-left: .7rem;
			}
			
			.search_bar input {
				width: 4.2rem;
				height: .88rem;
				padding-left: .1rem;
			}
			
			.search_bar i {
				content: " ";
				display: inline-block;
				height: .34rem;
				vertical-align: middle;
				border-left: .02rem solid #ccc;
				margin-left: .15rem;
				margin-right: .15rem;
			}
			
			.search_bar a {
				vertical-align: middle;
				color: #FFD445;
				font-size: .32rem;
				cursor: pointer;
			}
			
			#container {
				height: 50%;
			}
			
			.address {
				box-shadow: 0 .08rem .1rem 0 rgba(187, 172, 98, 0.10);
				margin-bottom: 1.8rem;
			}
			
			.address li {
				background-color: #fff;
				position: relative;
				padding: .3rem .9rem .3rem .3rem;
				font-size: .32rem;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.address li .img_font {
				padding-bottom: .1rem;
			}
			
			.address li .img_font img {
				width: .3rem;
				vertical-align: top;
			}
			
			.address li .img_font span {
				display: inline-block;
				max-width: 5.6rem;
				padding-left: .15rem;
				font-weight: 600;
			}
			
			.address li .detail {
				padding-left: .41rem;
				font-size: .24rem;
			}
			
			.address li .icon {
				position: absolute;
				right: .3rem;
				top: 40%;
			}
			
			.address li .icon img {
				width: .5rem;
			}
			
			.ad_div {
				position: fixed;
				bottom: 0;
			}
			
			.ad_div img {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="mcontainer">
			<!--搜索栏-->
			<div class="search_bar">
				<input type="text" placeholder="输入地点关键字查询柜点">
				<i></i>
				<a href="#">确定</a>
			</div>
			<!--百度地图-->
			<div id="container"></div>
			<!--显示的地址-->
			<ul class="address">
				<li>
					<p class="img_font"><img src="img/loc.png" alt=""><span>广州天河体育中心</span></p>
					<p class="detail">广州市天河区体育西路225号广州市天河区体育西路225号广州市天河区体育西路225号广州市天河区体育西路225号广州市天河区体育西路225号</p>
					<a href="#" class="icon"><img src="img/nav.png" alt=""></a>
				</li>
				<li>
					<p class="img_font"><img src="img/loc.png" alt=""><span>广州天河体育中心</span></p>
					<p class="detail">广州市天河区体育西路225号</p>
					<a href="#" class="icon"><img src="img/nav.png" alt=""></a>
				</li>
				<li>
					<p class="img_font"><img src="img/loc.png" alt=""><span>广州天河体育中心</span></p>
					<p class="detail">广州市天河区体育西路225号</p>
					<a href="#" class="icon"><img src="img/nav.png" alt=""></a>
				</li>
				<li>
					<p class="img_font"><img src="img/loc.png" alt=""><span>广州天河体育中心</span></p>
					<p class="detail">广州市天河区体育西路225号</p>
					<a href="#" class="icon"><img src="img/nav.png" alt=""></a>
				</li>
			</ul>
			<!--广告图-->
			<div class="ad_div">
				<img src="img/ad.png" alt="">
			</div>
		</div>

		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VxgrdH4s43VN82isZNlDOju6ONgLZ7AD"></script>
		<script type="text/javascript">
			$(function() {
				//定位信息字数的限制
				$(".locating .location_info").each(function() {
					var maxwidth = 4;
					if($(this).text().length > maxwidth) {
						$(this).text($(this).text().substring(0, maxwidth));
						$(this).html($(this).html() + '…');
					}
				});
				//刷新按钮的刷新
				$(".renovate").on("click", function() {
					window.location.reload();
				});
				//点击输入框隐藏定位信息
				$(".search_content").on("click", function() {
					$(this).css("width", "5.5rem");
					$(".locating").hide();
					$(".cancle").show();
				});
				//点击“取消”两个组显示定位信息
				$(".cancle").on("click", function() {
					$(".search_content").css("width", "4.12rem");
					$(".search_content input").val("");
					$(this).hide();
					$(".locating").show();
				});

				var map = new BMap.Map("container"); // 创建地图实例  
				var point = new BMap.Point(116.404, 39.915); // 创建点坐标  
				map.centerAndZoom(point, 15);
			});
		</script>
	</body>

</html>